<template>
  <div class="division">
    <header>部门管理</header>
    <form>
      <!-- 搜索组件 -->
      <search @send="send"></search>
      <el-button class="tj" type="primary" @click="Add" icon="el-icon-plus">添加</el-button>
    </form>
 
    <!-- 蒙层 -->
    <div class="mask" v-show="isShow">
      <!-- 添加内容的组件 -->
      <add :rule-form="ruleForm" @cancel="cancel"></add>
    </div>
    <el-table :data="tableData" stripe  border style="width: 100%">
      <el-table-column prop="Id" label="Id" width="50"></el-table-column>
      <el-table-column prop="shortName" label="部门简称" width="220"></el-table-column>
      <el-table-column prop="fullName" label="部门全称" width="220"></el-table-column>
      <el-table-column prop="orders" label="排序" width="220"></el-table-column>
      <el-table-column prop="notes" label="备注" width="220"></el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script type="text/ecmascript-6">
import { getAllMember, delMember } from "@/api/request.js";
import Add from "@/components/division/Add";
import Search from "@/components/division/Search";

export default {
  name: "",
  data() {
    return {
      input: "",
      tableData: [],
      isLoading: true,
      ruleForm: {},
      isShow: false
    };
  },
  components: {
    Add,
    Search
  },
  methods: {
    // 删除
    handleDelete(index, row) {
      delMember(row.Id).then(res => {
        if (res.data.code === 3000) {
          this.tableData.splice(index, 1);
          this.$message.success("删除成功");
        }
      });
    },
    Add() {
      this.isShow = true;
    },
    //监听取消
    cancel() {
      this.isShow = false;
    },
    //接收传来的数据
    send(data) {
      this.tableData = data;
    }
  
  },
  created() {
    getAllMember().then(res => {
      if (res.data.code === 3000) {
        console.log(res.data.list);
        this.tableData = res.data.list;
      }
    });
  }
};
</script>

<style lang="stylus" scoped>
.division {
  height: 100%;
  background: #fff;
  margin: 10px;
  padding: 20px;
}

header {
  height: 40px;
}

.el-table {
  height: 800px;
  margin: 10px 0 80px;
  border: 1px solid #ccc;
}

form {
  display: flex;
  justify-content: flex-start;
  padding: 10px 0;
}

.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100;
}
.tj{
   margin-top 10px
   height 40px
}
</style>
